﻿@page "/tables/excel"

<h3>@Localizer["H1"]</h3>
<h4>@Localizer["H2"]</h4>

<DemoBlock Title="@Localizer["P1"]" Introduction="@Localizer["P2"]" Name="OnQuery">
    <Table TItem="Foo" ShowToolbar="true" ShowRefresh="true" ShowColumnList="true" ShowExtendButtons="true"
           IsExcel="true" IsPagination="true" PageItemsSource="@PageItemsSource" 
           OnQueryAsync="@OnQueryAsync" OnAddAsync="@OnAddAsync" OnSaveAsync="@OnSaveAsync" OnDeleteAsync="@OnDeleteAsync">
        <TableColumns>
            <TableColumn @bind-Field="@context.DateTime" Width="180" />
            <TableColumn @bind-Field="@context.Name" />
            <TableColumn @bind-Field="@context.Address" Readonly="true" />
            <TableColumn @bind-Field="@context.Education" />
            <TableColumn @bind-Field="@context.Count" Editable="false" Align="Alignment.Right" />
            <TableColumn @bind-Field="@context.Complete" Align="Alignment.Center" />
        </TableColumns>
    </Table>

    <BlockLogger @ref="Trace" class="mt-3" />
</DemoBlock>

<p class="mt-3">@Localizer["P3"]</p>

<p>
    <div class="code-label">@Localizer["P4"]</div>
    <div class="mt-2">@Localizer["P5"]</div>
</p>

<Pre>protected override void OnInitialized()
{
    base.OnInitialized();

    Items = Foo.GenerateFoo(Localizer);
}</Pre>

<p>
    <div class="code-label">@Localizer["P6"]</div>
    <div class="mt-2">@Localizer["P7"]</div>
</p>

<Pre>private Task&lt;Foo&gt; OnAddAsync()
{
    // @Localizer["P8"]
    var foo = new Foo() { DateTime = DateTime.Now, Address = $"@Localizer["P8A"] {DateTime.Now.Second}" };
    Items.Insert(0, foo);

    // @Localizer["P9"]
    Trace.Log($"@Localizer["P10"]: {Items.Count} - @Localizer["P11"]: Add");
    return Task.FromResult(foo);
}</Pre>

<p>
    <div class="code-label">@Localizer["P12"]</div>
    <div class="mt-2">@Localizer["P13"]</div>
</p>

<Pre>private Task&lt;bool&gt; OnDeleteAsync(IEnumerable&lt;Foo&gt; items)
{
    // @Localizer["P14"]
    Items.RemoveAll(i => items.Contains(i));

    // @Localizer["P15"]
    Trace.Log($"@Localizer["P16"]: {Items.Count} - @Localizer["P17"]: Delete");
    return Task.FromResult(true);
}</Pre>

<p>
    <div class="code-label">@Localizer["P18"]</div>
    <div class="mt-2">@Localizer["P19"]</div>
    <div class="mt-2">@Localizer["P20"]</div>
</p>

<Pre>private Task&lt;bool&gt; OnDeleteAsync(Foo item, ItemChangedType changedType)
{
    // @Localizer["P21"]
    Trace.Log($"@Localizer["P22"] - @Localizer["P23"]");
    return Task.FromResult(true);
}</Pre>

<DemoBlock Title="@Localizer["P24"]" Introduction="@Localizer["P25"]" Name="CellRender">
    <ul class="ul-demo mb-3">
        <li>@Localizer["P26"]</li>
        <li>@Localizer["P27"]</li>
    </ul>
    <Table TItem="Foo" Items="@Items" IsBordered="true" IsExcel="true" IsFixedHeader="true" Height="500">
        <TableColumns>
            <TableColumn @bind-Field="@context.Name" Width="200">
                <EditTemplate Context="row">
                    <div class="d-flex disabled">
                        <div>
                            <img src="@Foo.GetAvatarUrl(row!.Id)" class="bb-avatar" />
                        </div>
                        <div class="ps-2">
                            <div>@row.Name</div>
                            <div class="bb-sub">@Foo.GetTitle(row!.Id)</div>
                        </div>
                    </div>
                </EditTemplate>
            </TableColumn>
            <TableColumn @bind-Field="@context.Address" />
            <TableColumn @bind-Field="@context.Education" Width="160" />
            <TableColumn @bind-Field="@context.Count" Width="160">
                <EditTemplate Context="row">
                    <div class="disabled">
                        <div>@row!.Count %</div>
                        <Progress Value="@row.Count" Color="@Foo.GetProgressColor(row.Count)"></Progress>
                    </div>
                </EditTemplate>
            </TableColumn>
            <TableColumn @bind-Field="@context.Complete" Align="Alignment.Center" Width="80" />
        </TableColumns>
    </Table>
</DemoBlock>
